<template>
  <div>
    <el-steps :active="active" simple>
      <el-step title="1.编辑基本信息" icon="none"></el-step>
      <el-step title="2.编辑商品信息" icon="none"></el-step>
    </el-steps>
    <keep-alive>
      <component
        ref="componentRef"
        :is="currentStep"
        :formModel="formModel"
      ></component>
    </keep-alive>
    <div class="pageButtom">
      <el-button type="primary" @click="next" v-if="active === 1"
        >下一步</el-button
      >
      <div v-else>
        <el-button
          type="primary"
          @click="
            active = 1;
            currentStep = 'CodeGoodBaseInfo';
          "
          >上一步</el-button
        >
        <el-button type="primary" @click="putWayCode">上架</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import CodeGoodBaseInfo from "./issueGoodForm/CodeGoodBaseInfo.vue";
import CodeGoodSellInfo from "./issueGoodForm/CodeGoodSellInfo.vue";
import {
  putIntegralGoods,
  getIntegralGoodsDetail,
  editIntegralGoodsDetail,
} from "@/api/integral/integral";
Component.registerHooks(["beforeRouteLeave"]);
import storage from "@/libs/storage";

@Component({
  components: {
    CodeGoodBaseInfo,
    CodeGoodSellInfo,
  },
})
export default class IssueGood extends Vue {
  /** 步骤 */
  active = 1;

  /** 商品id */
  goodId = "";

  formModel = {
    /** 商品id */
    id: "",
    /** 商品名称 */
    integralGoodName: "",
    /** 市场价 */
    guidePrice: "",
    /** 库存 */
    inventory: null,
    /** 积分 */
    integralPrice: "",
    /** 商品属性模板id */
    attributeId: "",
    /** 模板属性 */
    attributeName: "",
    /** 模板属性列表 */
    integralGoodsAttibuteDtos: [],
    interalGoodsAttibutes: [],
    /** 商品主图 */
    pic: "",
    /** 商品列表 */
    albumPics: "",
    /** 运费模板ID */
    freightTemplateId: "",
    /** 运费模板信息 */
    integralFreightTemplateDtos: [],
    /** 初始销量 */
    sales: "",
    /** 积分商品详情 */
    detail: "",
    /** 状态 */
    status: "",
  };

  /** 是否需要退出提示 */
  saveFlag = false;

  /** 当前步骤 */
  currentStep = "CodeGoodBaseInfo";

  @Ref()
  readonly componentRef: HTMLFormElement;

  mounted() {
    this.getDetail();
  }

  async next() {
    const res = await this.getGoodFormModel();
    if (this.currentStep === "CodeGoodBaseInfo") {
      if (!this.componentRef.isWeight) {
        this.componentRef.formModel.weight = "";
      }
    }
    if (res) {
      if (Number(this.formModel.integralPrice) <= 0) {
        this.$message.error("积分价不能小于0");
        return;
      }
      this.active = 2;
      this.currentStep = "CodeGoodSellInfo";
    }
  }

  /**
   * 验证表单
   */
  async getGoodFormModel() {
    try {
      await this.componentRef.getFormModel();
      return true;
    } catch (error) {
      this.$message.warning("请将信息填写完整");
      return false;
    }
  }

  /**
   * 发布积分商品
   */
  putWayCode() {
    storage.delete("baseModel");
    this.componentRef.getFormModel().then(res => {
      this.formModel.detail = res.detail;
    });
    this.saveFlag = true;
    if (this.formModel.id) {
      editIntegralGoodsDetail(this.formModel).then(res => {
        if (res.code === 200) {
          this.getBackIndex();
        }
      });
    } else {
      putIntegralGoods(this.formModel).then(res => {
        if (res.code === 200) {
          this.getBackIndex();
        }
      });
    }
  }

  /**
   * 返回发布页面
   */
  getBackIndex() {
    this.$message.success(`${this.formModel.id ? "编辑成功" : "上架成功"}`);
    this.$router.push({
      name: "integralMallIndex",
      params: { comName: "ProductList" },
    });
  }

  /**
   * 取消发布
   */
  cancel() {
    this.$router.push({
      name: "integralMallIndex",
      params: { comName: "ProductList" },
    });
  }

  /**
   * 编辑获取积分商品
   */
  async getDetail() {
    this.goodId = this.$route.params.id;
    if (!this.goodId) {
      return;
    } else {
      const param = {
        id: this.goodId,
      };
      const res = await getIntegralGoodsDetail(param);
      this.formModel = res.data;
    }
  }

  beforeRouteLeave(to, from, next) {
    if (this.saveFlag) {
      next();
      return;
    }
    this.$confirm(
      `确定要退出${
        this.$route.params.id ? "编辑" : "发布"
      }积分商品页面?退出后，未保存的信息将不会保留!`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      storage.delete("baseModel");
      next();
    });
  }
}
</script>

<style lang="scss" scoped>
.pageButtom {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .w-e-text-container {
  height: 600px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>
